<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>充值记录</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="/gupiao/css/weui.css">
    <link rel="stylesheet" href="/gupiao/css/jquery-weui.css">
    <link rel="stylesheet" href="/gupiao/css/style.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_689900_tgundrn0e1a46lxr.css">

</head>
<body class="back1">

<div class="index-top-fix">
    <a href="{:url('index/gupiao.mycenter/mycenter')}" class="iconfont icon-left- left"></a>
    <p class="title">充值记录</p>
</div>

<div class="mt50"></div>
<div class="weui-panel__bd" style="margin-top:40px;background:white">
    <div id="list"></div>

</div>


<div class="weui-loadmore" id="loadmore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>




</body>
</html>

<script src="/gupiao/js/jquery.min.js"></script>
<script src="/gupiao/js/jquery-weui.min.js"></script>

<script>
    // 页面初始加载数据
    $(function(){
        $.ajax({
            type : "GET",
            url : "{:url('gupiao.users/rechargelist')}",
            dataType:'json',

            success : function (res) {
                if(res.code == 200){
                    var   banner  = res.data;
                    var   html    = '';
                    if(banner.length != 0){
                        for(var i=0;i<banner.length;i++){
                            var data = res.data[i];
                            html += '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'+
                                '<div class="float:left;width:50px;">'+
                                '<img src="'+data.photo+'" style="width:40px;">'+
                                '</div>'+
                                '<div class="weui-media-box__bd" style="margin-left:10px;">'+
                                '<p>充值成功</p>'+
                                '<p class="weui-media-box__desc" style="margin-top: 5px;">'+data.username+'</p>'+
                                '</div>'+
                                '<div class="weui-media-box__bd" style="text-align: right">'+
                                '<p>'+data.money+'元</p>'+
                                '<p class="weui-media-box__desc" style="margin-top: 5px;">'+data.create_time+'</p>'+
                                '</div>'+
                                '</a>'
                        }
                    }
                    if(banner.length == 0){
                        html += "<div style='text-align: center;padding:20px 0;color:#ccc;'>暂时没有最新数据</div>";
                    }
                    if(res.count < 15){
                        $("#loadmore").hide();
                    }
                    $("#list").html(html);
                }
            }


        })
    })
</script>

<script>
    //进行下拉刷新的时候进行加载
    var _page = 1;
    var loading = false;  //状态标记
    $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        setTimeout(function() {
            _page++;
            $.ajax({
                type : "POST",
                url : "{:url('gupiao.users/rechargelist')}",
                data:{page:_page},
                dataType:'json',
                success : function (res) {
                    if(res.code == 200){
                        var   banner  = res.data;
                        var   html    = '';
                        if(banner.length != 0){
                            for(var i=0;i<banner.length;i++){
                                var data = res.data[i];
                                html += '<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'+
                                    '<div class="float:left;width:50px;">'+
                                    '<img src="'+data.photo+'" style="width:40px;">'+
                                    '</div>'+
                                    '<div class="weui-media-box__bd" style="margin-left:10px;">'+
                                    '<p>充值成功</p>'+
                                    '<p class="weui-media-box__desc" style="margin-top: 5px;">'+data.username+'</p>'+
                                    '</div>'+
                                    '<div class="weui-media-box__bd" style="text-align: right">'+
                                    '<p>'+data.money+'元</p>'+
                                    '<p class="weui-media-box__desc" style="margin-top: 5px;">'+data.create_time+'</p>'+
                                    '</div>'+
                                    '</a>'
                            }
                        }
                        if(banner.length == 0){
                            html += "<div style='text-align: center;padding:20px 0;color:#ccc;'>最新数据</div>";

                        }
                        if(res.count < 15){
                            $("#loadmore").hide();
                        }
                        $("#list").append(html);
                    }
                }
            });
            // loading = false;
        }, 1500);   //模拟延迟
    });

</script>
